<template>
    <el-container>
        <div class="right-panel">
            <div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
                <div class="panel-search-box" style="width: 300px">
                    <span class="demonstration" style="margin-left: 10px">员工编码:</span>
                    <el-input v-model="search.feedbackCode" placeholder="请输入员工编码"
                        style="margin-left: 10px; width: 250px" clearable></el-input>
                </div>
                <div class="panel-search-box" style="width: 300px">
                    <span class="demonstration" style="margin-left: 10px">姓名:</span>
                    <el-input v-model="search.feedbackName" placeholder="请输入姓名" style="margin-left: 10px; width: 250px"
                        clearable></el-input>
                </div>
                <div class="panel-search-box" style="width: 300px">
                    <span class="demonstration" style="margin-left: 10px">时间范围:</span>
                    <el-date-picker v-model="timeHorizon" type="daterange" range-separator="-" start-placeholder="起始时间"
                        end-placeholder="截止时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :size="size"
                        style="margin-left: 10px; width: 250px !important" />
                </div>

                <div class="panel-search-box" style="width: 300px">
                    <span class="demonstration" style="margin-left: 10px">问题类型:</span>
                    <el-select v-model="search.feedbackType" placeholder="请选择问题类型" clearable>
                        <el-option label="功能bug" value="0" />
                        <el-option label="功能性问题" value="1" />
                        <el-option label="内容性建议 " value="2" />
                        <el-option label="数据问题" value="3" />
                        <el-option label="需求意见" value="4" />
                        <el-option label="其他问题" value="5" />
                    </el-select>
                </div>

                <div style="flex: 1; display: flex; justify-content: right; align-items: center; padding-right: 20px">
                    <div class="panel-search-box">
                        <el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
                        <el-button type="" @click="cleanSearch">清空</el-button>
                        <el-button type="primary" style="margin-left: 10px" @click="exportDetail">导出</el-button>
                    </div>
                    <el-button type="primary" style="" @click="batchRead">批量已读</el-button>

                </div>
            </div>
        </div>
        <el-header style="display: none"></el-header>


        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" :params="params" stripe border remoteSort remoteFilter
                @selection-change="selectionChange">
                <el-table-column fixed='left' type="selection" :selectable="displaySelection"
                    width="50"></el-table-column>

                <el-table-column fixed='left' label="员工编码" prop="id" align="center" min-width="150">
                    <template #default="scope">
                        <span>{{ scope.row.feedbackCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed='left' label="姓名" prop="name" align="center" min-width="150">
                    <template #default="scope">
                        <span>{{ scope.row.feedbackName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="问题类型" prop="ldap" align="center" min-width="150">
                    <template #default="scope">
                        <span>{{ changeType(scope.row.feedbackType) }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="问题描述" prop="ldap" align="center" min-width="150">
                    <template #default="scope">
                        <span>{{ scope.row.feedbackContent }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="图片" prop="ldap" align="center" min-width="150">
                    <template #default="scope">
                        <el-button-group>
                            <el-button link type="warning" size="small"
                                @click="handleImg(scope.row.feedbackImageid)">查看详情</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right" align="center" width="150">
                    <template #default="scope">
                        <el-button-group>
                            <el-button :disabled="scope.row.feedbackRead == 1" type="primary" size="small"
                                @click="handleMsg(scope.row.id)">{{ scope.row.feedbackRead == 0 ? '未读' : '已读'
                                }}</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>

        <div class="search-box">
            <div class="panel-search-box" style="margin-bottom: 10px">
                <scFileExport ref="scFileExport" :apiObj="deriveExcel" :post="true" :data="search" fileName="数据导出"
                    hideButton>
                </scFileExport>
            </div>
        </div>


        <el-drawer v-model="dialogSlideShow" title="附件详情" size="40%">
            <div v-if="imgArr.length > 0" style="padding: 20px;display: flex;flex-wrap: wrap;justify-content: center;">
                <div v-for="(item, index) in imgArr" :key="index">
                    <img :src="item" alt="" @click="clickImg(item)" style="width: 200px;height: 200px;margin: 10px">
                </div>
            </div>
        </el-drawer>

        <el-dialog v-model="dialogImg" width="40%">
            <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center">
                <img w-full :src="imgUrl" alt="" style="width: 500px;height: 450px" />
            </div>
        </el-dialog>


    </el-container>
</template>

<script>
import useTabs from '@/utils/useTabs'


export default {
    name: 'feedback',
    data() {
        return {
            search: {},
            apiObj: this.$API.emp.feedbackList,
            timeHorizon: '',
            imgUrl: "",
            imgArr: [],
            ids: [],
            deriveExcel: this.$API.emp.noticeExport,
            dialogSlideShow: false,
            dialogImg: false
        }

    },
    watch: {

    },
    computed: {

    },
    mounted() {
        // this.getImg()
    },
    methods: {
        clickImg(e) {
            this.imgUrl = e
            this.dialogImg = true

        },
        async handleImg(e) {
            this.dialogSlideShow = true
            this.imgArr = []

            let imgData = e.split(';')
            imgData.forEach((id) => {
                this.getImg(id)
            })
        },
        changeType(key) {
            switch (key) {
                case 0:
                    return '功能bug'
                case 1:
                    return '功能性问题'
                case 2:
                    return '内容性建议'
                case 3:
                    return '数据问题'
                case 4:
                    return '需求意见'
                case 5:
                    return '其他问题'
                default:
                    break;
            }

        },
        async render() {

        },
        upsearch() {
            if (this.timeHorizon) {
                this.search.startDate = this.timeHorizon[0]
                this.search.endDate = this.timeHorizon[1]
            }
            this.$refs.table.upData(this.search)
        },

        cleanSearch() {
            this.search = {}
            this.timeHorizon = null
            this.$refs.table.reload(this.search)
        },

        async getImg(id) {
            // let res = await this.$API.emp.feedbackImage.get({ fileId: "69c9ebed-385b-4237-ae5b-d7166dcbbadc" })
            let res = await this.$API.emp.feedbackImage.get({ fileId: id })
            const imageBase64 = btoa(
                new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), '')
            )
            // 使用base64编码字符串来显示图像
            // this.imgUrl = `data:image/jpeg;base64,${imageBase64}`
            if (imageBase64) {
                let url = `data:image/jpeg;base64,${imageBase64}`
                this.imgArr.push(url)
            }
        },

        //批量已读
        async batchRead() {
            var ids = this.ids
            // console.log('选中的数据',ids);
            if (ids.length > 0) {
                await this.$API.emp.updateRead.post({ data: this.ids })
                useTabs.refresh()
            }
            this.$refs.table.clearSelection()
        },

        //获取选中行ID数组
        async selectionChange(val) {
            this.ids = []
            // 去重获取被选中的id值存入到数组中
            for (let selectedItem of val) {
                this.ids.push({ id: selectedItem.id, feedbackRead: 1 })
            }
            // console.log('选中的',this.ids);
            return this.ids
        },

        async handleMsg(id) {
            let res = await this.$API.emp.updateRead.post({
                data: [{
                    id: id,
                    feedbackRead: 1
                }]
            })
            useTabs.refresh()
        },

        //导出
        exportDetail() {
            this.$refs.scFileExport.open()
        },

    }

}
</script>

<style>
.header-btn-item {
    display: flex;
}

.read1 {
    color: #999999;
}

.read2 {
    color: #f5a21d;
}
</style>
